<template>
  <div class="go_back_container">
    <!-- 返回顶部和刷新主题 -->
    <div class="tools d-none d-md-block">
      <!-- 刷新页面 -->
      <div class="shuaxin-bar" v-if="upload">
        <div
          class="shuaxin-bar-content"
          @mouseenter="updateColor(0)"
          @mouseleave="delColor(0)"
        >
          <div class="shuaxin-bar-content-box">
            <span>刷新主题</span>
          </div>
          <svg
            t="1662712509797"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3383"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            width="18"
            height="18"
          >
            <path
              d="M684.032 403.456q-17.408-8.192-15.872-22.016t11.776-22.016q3.072-2.048 19.968-15.872t41.472-33.28q-43.008-49.152-102.4-77.312t-129.024-28.16q-64.512 0-120.832 24.064t-98.304 66.048-66.048 98.304-24.064 120.832q0 63.488 24.064 119.808t66.048 98.304 98.304 66.048 120.832 24.064q53.248 0 100.864-16.896t87.04-47.616 67.584-72.192 41.472-90.624q7.168-23.552 26.624-38.912t46.08-15.36q31.744 0 53.76 22.528t22.016 53.248q0 14.336-5.12 27.648-21.504 71.68-63.488 132.096t-99.84 103.936-128.512 68.096-148.48 24.576q-95.232 0-179.2-35.84t-145.92-98.304-98.304-145.92-36.352-178.688 36.352-179.2 98.304-145.92 145.92-98.304 179.2-36.352q105.472 0 195.584 43.52t153.6 118.272q23.552-17.408 39.424-30.208t19.968-15.872q6.144-5.12 13.312-7.68t13.312 0 10.752 10.752 6.656 24.576q1.024 9.216 2.048 31.232t2.048 51.2 1.024 60.416-1.024 58.88q-1.024 34.816-16.384 50.176-8.192 8.192-24.576 9.216t-34.816-3.072q-27.648-6.144-60.928-13.312t-63.488-14.848-53.248-14.336-29.184-9.728z"
              p-id="3384"
              :fill="color1 ? '#5f6575' : '#fff'"
            ></path>
          </svg>
        </div>
      </div>
      <!-- 返回顶部 -->
      <div class="zhiding-bar" @click="topClick">
        <div
          class="zhiding-bar-content"
          @mouseenter="updateColor(1)"
          @mouseleave="delColor(1)"
        >
          <div class="zhiding-bar-content-box">
            <span>返回顶部</span>
          </div>
          <svg
            t="1662714321616"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3583"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            width="18"
            height="18"
          >
            <path
              d="M896.149659 67.771523 126.54051 67.771523c-34.758642 0-62.935378 28.176736-62.935378 62.935378 0 34.757618 28.176736 62.934355 62.935378 62.934355l769.610172 0c34.758642 0 62.935378-28.176736 62.935378-62.934355C959.085036 95.948259 930.9083 67.771523 896.149659 67.771523zM557.654294 258.83814c-1.471514-1.470491-3.016707-2.862187-4.625344-4.181229-0.713244-0.586354-1.469468-1.095961-2.202155-1.6465-0.906649-0.681522-1.797949-1.384533-2.743484-2.01796-0.884137-0.591471-1.805112-1.105171-2.713808-1.648546-0.853437-0.509606-1.689479-1.044796-2.568499-1.515516-0.928139-0.496304-1.883907-0.917906-2.832512-1.364067-0.913812-0.431835-1.811252-0.886183-2.746554-1.27504-0.924045-0.382717-1.864464-0.689708-2.800789-1.02433-1.000793-0.36225-1.989307-0.744967-3.012613-1.054005-0.938372-0.283456-1.892093-0.491187-2.837628-0.729617-1.043772-0.264013-2.071172-0.554632-3.133364-0.766456-1.094938-0.215918-2.201132-0.344854-3.305279-0.503467-0.927115-0.13303-1.840928-0.309038-2.78237-0.402159-2.059915-0.201591-4.124947-0.311085-6.192026-0.312108-0.005117 0-0.011256 0-0.016373 0l0 0c-0.299829 0-0.599657 0.037862-0.898463 0.041956-16.406668-0.231267-32.884968 5.874801-45.402049 18.391882L148.569222 577.09967c-24.576745 24.578792-24.576745 64.425312 0 89.005127 12.288884 12.289907 28.396747 18.434861 44.502563 18.434861 16.105816 0 32.213679-6.144954 44.502563-18.434861l212.633818-212.634842L450.208167 893.124254c0 34.757618 28.176736 62.934355 62.934355 62.934355 34.758642 0 62.935378-28.176736 62.935378-62.934355L576.077899 455.269951l210.836893 210.834846c12.288884 12.289907 28.395724 18.434861 44.500517 18.434861 16.10684 0 32.212656-6.144954 44.500517-18.434861 24.580838-24.579815 24.580838-64.426335 0-89.005127L557.654294 258.83814z"
              p-id="3584"
              :fill="color2 ? '#5f6575' : '#fff'"
            ></path>
          </svg>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { scrolltoToc } from "@/utils/menuScroll";

export default {
  name: "GoBack",
  props: ["upload"],
  data() {
    return {
      // 控制刷新主题颜色
      color1: true,
      // 控制置顶主题颜色
      color2: true,
    };
  },
  methods: {
    // 更改选中颜色
    updateColor(num) {
      /**
       * 0 刷新
       * 1 置顶
       */
      if (num === 0) return (this.color1 = false);
      if (num === 1) return (this.color2 = false);
    },
    delColor(num) {
      if (num === 0) return (this.color1 = true);
      if (num === 1) return (this.color2 = true);
    },
    // 顶部点击
    topClick() {
      scrolltoToc(0);
    },
  },
};
</script>

<style lang="less" scoped>
// 返回顶部和刷新主题
.tools {
  position: fixed;
  bottom: 0;
  right: 0;
  height: 140px;
  width: 20px;
  z-index: 2000;
  svg {
    position: absolute;
    top: 7px;
    right: 10px;
  }
  & > div {
    position: relative;
    & > div {
      display: flex;
      & > div {
        position: absolute;
        align-items: center;
        right: 0;
        border-radius: 18px 0 0 18px;
        width: 0;
        color: #fff;
      }
    }
    &:hover {
      & > div {
        & > div {
          cursor: url("@/assets/mouse/x2.cur"), auto !important;
          background: #0dce9e;
          width: 112px !important;
          height: 32px;
        }
      }
      svg {
        cursor: url("@/assets/mouse/x2.cur"), auto !important;
      }
    }
    span {
      font-size: 14px;
      margin-right: 22px;
      line-height: 32px;
    }
  }
  .zhiding-bar {
    top: 44px;
  }
}
</style>